<template>
  <div class="base-time-line-item" :style="[setItemSty]">
    <!-- 左侧 -->
    <div class="title">
      <slot name="title">
        {{ title }}
      </slot>
    </div>
    <!-- 线条 -->
    <div :class="['line', showLine ? '' : 'hide-line']" :style="[setLineSty]">
      <slot name="dot">
        <div class="dot" :style="[setDotSty]" />
      </slot>
    </div>
    <!-- 主体内容 -->
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  inject: ['colors', 'tops', 'minHeights'],
  props: {
    // 最左侧文本值
    title: {
      type: String,
      default: ''
    },
    // 是否显示线条
    showLine: {
      type: Boolean,
      default: true
    },
    // 圆点颜色
    color: {
      type: String,
      default: ''
    },
    // 圆点偏移值
    top: {
      type: [String, Number],
      default: ''
    },
    // 占据最小的高度
    minHeight: {
      type: [String, Number],
      default: ''
    },
    // 线条自定义样式
    lineStyle: {
      type: Object,
      default: () => {}
    },
    // 圆点自定义样式
    dotStyle: {
      type: Object,
      default: () => {}
    },
    // item自定义样式
    itemStyle: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    setLineSty() {
      const sty = {
        backgroundColor: this.color || this.colors,
        ...this.lineStyle
      }
      return sty
    },
    setDotSty() {
      let t = this.top || this.tops
      t = typeof t === 'number' ? t + 'rpx' : t
      const sty = {
        backgroundColor: this.color || this.colors,
        top: t,
        ...this.dotStyle
      }
      return sty
    },
    setItemSty() {
      let m = this.minHeight || this.minHeights
      m = typeof m === 'number' ? m + 'rpx' : m
      const sty = {
        minHeight: m,
        ...this.itemStyle
      }
      return sty
    }
  }
}
</script>

<style lang="scss" scoped>
.base-time-line-item {
  display: flex;
  .title{
    text-align: right;
    width: 100px;
  }
}
.base-time-line-item .line {
  width: 1px;
  position: relative;
  margin: 0 15px;
}
.base-time-line-item .dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.base-time-line-item .hide-line {
  width: 0px;
}
.base-time-line-item .content {
  flex: 1;
}
</style>
